<template>
  <!-- 行为分布结果 -->
  <div class="wrap g-card" style="margin-bottom: 20px">
    <div class="title-header">标签规则</div>
    <div class="container">
      <p class="con-title">创建规则</p>
      <p class="con-notice">在全部用户中，使用 “{{ tagMap[tagType].text }}” 作为标签值，进行用户的标记</p>
      <el-row style="margin-top:20px;">
        <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
          <div class="tag-item">
            <div class="tag-first">
              <div class="tag-second" v-for="(item, index) in levels[levelActived][tagMap[tagType].byte].children"
                :key="index">
                <!-- <div class="relation" v-if="item.children.length > 1">
                  <span class="and" @click="tagSecondRelationBehaviorTap(index, item.relation)">
                    {{ item.relation ? '且' : '或' }}
                  </span>
                </div> -->
                <!-- <div class="tags"> -->
                <div class="item behavior" v-for="(itm, idx) in item.children" :key="idx">
                  <div class="behavior-item-top">
                    <el-date-picker v-model="itm.timelist" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                      :editable="false" end-placeholder="结束日期" start-placeholder="开始日期" format="yyyy-MM-dd"
                      :clearable="false"></el-date-picker>
                    <span style="margin: 0 10px;">完成</span>
                    <el-select v-model="itm.cont" style="width: 170px">
                      <el-option v-for="item in behaviorsOptions" :key="item.attributeShowName"
                        :label="item.attributeShowName" :value="item.attributeShowName">{{ item.attributeShowName }}
                      </el-option>
                    </el-select>
                    <el-button @click="addFilter(index, idx)" icon="el-icon-plus" style="margin-left: 10px;"
                      type="text">添加筛选</el-button>
                    <!-- <div class="opt">
                        <span class="add" @click="addSecondBehavior(index, idx)"
                          v-if="item.children.length - 1 === idx"><i
                            class="el-icon-circle-plus-outline"></i>&nbsp;新增</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="del" @click="delBehavior(index, idx)"><i class="el-icon-close"></i></span>
                      </div> -->
                  </div>
                  <div class="behavior-item-center" v-if="itm.children.length">
                    <div class="behavior-item-center-left">
                      <span>且满足</span>
                    </div>
                    <div class="behavior-item-center-center" style="margin-top: 10px;" v-if="itm.children.length > 1">
                      <span class="line top"></span>
                      <span class="and" @click="tagThirdRelationBehaviorTap(index, idx, itm.relation)">
                        {{ itm.relation == 'true' ? '且' : '或' }}</span>
                      <span class="line bottom"></span>
                    </div>
                    <div class="behavior-item-center-right" style="margin-top: 10px;">
                      <div class="behavior-item-center-right-con" v-for="(m, i) in itm.children" :key="i">
                        <!--  v-if="tagType == 3 || tagType == 1" -->
                        <div style="display: inline-block;">
                          <el-cascader v-model="m.times" :options="behaviorsSubOptions[itm.cont]"
                            @change="val => cascaderChange(val, behaviorsSubOptions[itm.cont], m)"
                            style="width:170px"></el-cascader>
                          <el-select v-model="m.flag" style="width: 100px ; margin-left: 12px">
                            <el-option v-for="item in sortList" :key="item.value" :label="item.value"
                              :value="item.value"></el-option>
                          </el-select>
                          <el-input v-if="(m.flag !== '区间' && m.flag !== 'TOPN')" v-model="m.value" placeholder="请输入"
                            style="width: 100px;margin-left: 12px;"></el-input>
                          <span v-if="(m.flag !== '区间' && m.flag !== 'TOPN')">&nbsp;{{ m.text || '次' }}</span>
                          <el-input v-if="(m.flag === '区间')" v-model="m.value" placeholder="请输入"
                            style="width: 100px;margin: 0 12px"></el-input>
                          <span v-if="(m.flag === '区间')" style="margin-right:12px">至</span>
                          <el-input v-if="(m.flag === '区间')" v-model="m.valuenext
                            " placeholder="请输入" style="width: 100px;"></el-input>
                          <span v-if="(m.flag === '区间')">&nbsp;{{ m.text || '次' }}</span>
                          <!-- <el-select v-if="(m.flag === 'TOPN')" v-model="m.topflag" style="width: 100px ; margin: 0 12px">
                            <el-option v-for="item in topFlagList" :key="item.value" :label="item.label"
                              :value="item.value"></el-option>
                          </el-select> -->
                          <!-- <el-input v-if="(m.flag === 'TOPN')" v-model="m.value" placeholder=""
                            style="width: 100px ;"></el-input>
                          <span v-if="(m.flag === 'TOPN' && m.topflag !== '3')">&nbsp;名</span>
                          <span v-if="(m.flag === 'TOPN' && m.topflag === '3')" style="margin: 0 12px">至</span>
                          <el-input v-if="(m.flag === 'TOPN' && m.topflag === '3')" v-model="m.valuenext
                            " placeholder="" style="width: 100px ;"></el-input>
                          <span v-if="(m.flag === 'TOPN' && m.topflag === '3')">&nbsp;名</span> -->
                        </div>
                        <!-- <div v-else style="display: inline-block;">
                          <el-select v-model="m.cont" style="width: 170px">
                            <el-option v-for="item in [{ value: '1', label: '页面浏览时长' }, { value: '2', label: '页面浏览时段' },]"
                              :key="item.value" :label="item.label" :value="item.value"></el-option>
                          </el-select>
                          <el-select v-model="m.flag" style="width: 100px;margin: 0 10px;">
                            <el-option v-for="item in sortList" :key="item.value" :label="item.value"
                              :value="item.value"></el-option>
                          </el-select>
                          <el-input style="width: 100px;" v-model="m.value" placeholder="请输入"></el-input>
                        </div> -->
                        <span class="del" style="margin-left: 10px;" @click="delThirdBehavior(index, idx, i)">
                          <i class="el-icon-close icon-hover"></i></span>
                      </div>
                    </div>
                  </div>
                  <div v-if="tagType == 3" class="behavior-item-top">
                    <el-select v-model="itm.distributeType"
                      :style="{ 'width': '100px', 'margin-top': item.children[0].children.length > 0 ? '0' : '10px' }">
                      <el-option v-for="item in [{ value: '1', label: '天数' }, { value: '2', label: '小时数' },]"
                        :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <span style="margin-left: 10px;">整体分布</span>
                  </div>
                  <div v-if="tagType == 1" class="behavior-item-top">
                    <el-select v-model="itm.occurrence"
                      :style="{ 'width': '100px', 'margin-top': item.children[0].children.length > 0 ? '0' : '10px' }">
                      <el-option v-for="item in [{ value: '1', label: '首次发生' }, { value: '2', label: '末次发生' },]"
                        :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <!-- :style="{ 'width': '100px', 'margin-top': item.children[0].children.length > 0 ? '0' : '10px' }" -->
                    <el-select v-model="itm.pointTime" style="margin-left: 10px;">
                      <el-option v-for="item in [{ value: '1', label: '截止当前' }, { value: '2', label: '截止日期' },]"
                        :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <el-date-picker v-if="itm.pointTime == 2" v-model="itm.date" value-format="yyyy-MM-dd" type="date"
                      :editable="false" :picker-options="pickerOptions(itm)" style="margin-left: 10px;" placeholder="请选择"
                      format="yyyy-MM-dd" :clearable="false"></el-date-picker>
                    <!-- <span style="margin-left: 10px;">整体分布</span> -->
                  </div>
                  <div v-else-if="tagType == 2" class="behavior-item-top">
                    <el-select v-model="itm.urlState"
                      :style="{ 'width': '140px', 'margin-top': item.children[0].children.length > 0 ? '0' : '10px' }">
                      <el-option v-for="item in [{ value: '1', label: '停留时长' }, { value: '2', label: '页面地址' },]"
                        :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <el-select v-model="itm.urlStateMost"
                      :style="{ 'width': '140px', 'margin-top': item.children[0].children.length > 0 ? '0' : '10px', 'margin-left': '10px' }">
                      <el-option v-for="item in [{ value: '1', label: '数值最大' }, { value: '2', label: '出现次数最多' },]"
                        :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <span style="margin: 0 10px;">前</span>
                    <el-input style="width: 100px;" v-model="itm.mostValue" placeholder="请输入"></el-input>
                    <span style="margin: 0 10px;">名</span>
                  </div>
                </div>
                <!-- </div> -->
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <p class="con-title">更新方式</p>
      <div>
        <el-radio-group v-model="params.ways">
          <el-radio-button label="1">例行</el-radio-button>
          <el-radio-button label="2">手动</el-radio-button>
        </el-radio-group>
      </div>
      <div class="ways-con" v-if="params.ways === '1'">
        <span style="padding: 0 5px;color: #333;">按</span>
        <el-select v-model="params.calc" style="width: 80px;">
          <el-option value="day" label="天"></el-option>
          <el-option value="week" label="周"></el-option>
          <el-option value="month" label="月"></el-option>
        </el-select>
        <span style="padding: 0 5px;color: #333;">计算</span>
        <span v-if="params.calc === 'day'" style="font-size: 12px;color: #999;">标签每日凌晨更新！</span>
        <span v-if="params.calc === 'week'" style="font-size: 12px;color: #999;">标签每周一凌晨更新！</span>
        <span v-if="params.calc === 'month'" style="font-size: 12px;color: #999;">标签每月一号凌晨更新！</span>
      </div>
      <div class="ways-con" v-if="params.ways === '2'">
        <span style="font-size: 12px;color: #999;">标签生成后，通过手动点击“生成”按钮，进行数据的更新！</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    levels: Array,
    behaviorsOptions: Array,
    topFlagList: Array,
    behaviorsSubOptions: Array,
    sortList: Array,
    addThirdBehavior: Function,
    cascaderChange: Function,
    tagThirdRelationBehaviorTap: Function,
    params: Object,
    tagType: [String, Number],
    tagMap: Object,
  },
  data() {
    return {
      levelActived: 0,
      text: ''
    }
  },
  computed: {
    pickerOptions() {
      return item => {
        // console.log('item', item, new Date(item.timelist[0]).getTime());
        return {
          disabledDate: time => {
            if (item.timelist && item.timelist.length) {
              return time < (new Date(item.timelist[0]).getTime() - (24 * 60 * 60 * 1000)) || time >= new Date(item.timelist[1]).getTime()
            } else return true
          }
        }
      }
    }
  },
  methods: {
    addFilter(index, idx) {
      this.levels[this.levelActived][this.tagMap[this.tagType].byte].children[index].children[idx].children.push({
        additionalAttribute: '',
        operator: '',
        value: '',
      })
      // console.log('this.levels[this.levelActived][this.tagMap[this.tagType].byte].children[index].children[idx].children',
      //   this.levels[this.levelActived][this.tagMap[this.tagType].byte].children[index].children[idx].children);
    },
    delThirdBehavior(index, idx, i) {
      this.levels[this.levelActived][this.tagMap[this.tagType].byte].children[index].children[idx].children.splice(i, 1)
    },
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/base.scss";

.icon-hover:hover {
  color: $ownStyle
}

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}

.container {
  padding: 0px 20px;

  .con-title {
    font-size: 14px;
    line-height: 1.5;
    margin: 30px 0 10px;
  }

  .con-notice {
    font-size: 12px;
    line-height: 1.5;
    color: #999;
  }

  .tag-item {
    border: 1px solid #bbb;
    padding: 10px;
    border-radius: 5px;

    .behavior-item-center {
      display: flex;
      align-items: stretch;
      width: 100%;

      .behavior-item-center-left {
        flex-shrink: 0;
        position: relative;
        width: 80px;
        display: flex;
        align-items: center;

        ::after {
          content: "";
          display: block;
          position: absolute;
          width: 3px;
          height: 100%;
          background-color: $ownStyle;
          top: 0;
          left: 60%;
          // transform: translateX(-50%);
          z-index: 6;
        }

        span {
          display: inline-block;
          font-size: 12px;
          // margin-top: 20px;
          // margin-top: 50%;
          color: $ownStyle;
        }
      }

      .behavior-item-center-center {
        display: flex;
        flex-direction: column;
        width: 40px;
        align-items: center;
        justify-content: center;
        padding: 14px 0;

        .and {
          display: block;
          flex-shrink: 0;
          width: 22px;
          height: 22px;
          color: #999;
          border: 1px solid #eee;
          border-radius: 3px;
          text-align: center;
          line-height: 20px;
          font-size: 12px;
          cursor: pointer;
          user-select: none;

          &:hover {
            color: $warnCokor;
            border: 1px solid $warnCokor;
          }
        }

        .line {
          display: block;
          flex-grow: 0.5;
          // background-color: red;
          width: 50%;
          transform: translateX(50%);
          border-left: 1px solid $warnCokor;

          &.top {
            border-top: 1px solid $warnCokor;
            border-top-left-radius: 2px;
          }

          &.bottom {
            border-bottom: 1px solid $warnCokor;
            border-bottom-left-radius: 2px;
          }
        }
      }
    }

    .behavior-item-center-right {
      padding-bottom: 10px;
    }

    .behavior-item-center-right>div:not(:last-child) {
      margin-bottom: 10px;
    }

  }

  .ways-con {
    margin: 10px 0;
  }

}
</style>
